<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title>系统人员</title>
		<script th:src="@{/layui/layui.js}" type="text/javascript"></script>
		<link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
	</head>
	<body>
		
		<div class="layui-panel" style="padding: 8px;">
			<fieldset class="layui-elem-field layui-border-blue">
				<legend>搜索信息</legend>
				<form class="layui-form layui-form-pane" style="margin: 20px;">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">名称</label>
							<div class="layui-input-inline">
								<input class="layui-input" type="text" name="name" autocomplete="off" />
							</div>
						</div>
						<div class="layui-inline">
							<div class="layui-input-inline">
								<a class="layui-btn layui-btn-primary" lay-submit="" lay-filter="searchBtn">
									<i class="layui-icon layui-icon-search"></i>
									搜索
								</a>
							</div>
						</div>
					</div>
				</form>
			</fieldset>
			<div>
				<table id="memberTable" lay-filter="memberTable"></table>
			</div>
		</div>
		<script id="tool" type="text/html">
			{{# if(d.isUpdate==0){ }}
			<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
			{{# }}}
		</script>
		<script id="tableBar" type="text/html">
			<a class="layui-btn layui-btn-normal layui-btn-md" lay-event="add">
				<i class="layui-icon layui-icon-add-1"></i>
				新增
			</a>
		</script>
		<script id="switchState" type="text/html">
			<input type="checkbox" name="state" value="{{d.state}}"
				lay-skin="switch" lay-text="是|否" lay-filter="checkstate" {{d.state==0?"checked":""}} />
		</script>
		<script id="photo" type="text/html">
			{{# if(d.isUpdate==0){ }}
			<img src="/file/fc/showImg/{{d.photoPath}}" style="width: 30px;height: 60px;">
			{{# }}}
		</script>
		<script>

			layui.use(['table','form','layer'],function(){
				var table = layui.table,form = layui.form,
				layer = layui.layer;
				
				//加载表格
				table.render({
					elem:'#memberTable',
					height:'full-160',
					page: {
						theme:'#1e9fff'
					},
					toolbar:'#tableBar',
					url:'/system/mc/find',
					cols:[
							[
						{type:'numbers',fixed:'left'},
						{type:'checkbox',fixed:'left'},
						{field:'userName',title:'名称',width:150},
						{field:'loginName',title:'登录账号',width:150},
						{field:'state',title:'是否可用',width:180,templet:'#switchState'},
						{field:'photoPath',title:'头像',width:80,templet: '#photo',align: 'center'},
						{field:'roleIds',title:'角色名称'},
						{field:'createTime',title:'创建时间',width:250},
						{fixed:'right',title:'操作',width:150,align:'center',toolbar:'#tool'},
					]
					]
				})
				
				//监听搜索按钮
				form.on('submit(searchBtn)',function(data){
					var dataForm = data.field;
					console.log(dataForm);
				})

				var active = {
					addOrUpdate:function (content) {
						var b = false;
						top.layer.open({
							type:2,
							content:content,
							area:['700px','650px'],
							btn:['确认保存','取消关闭'],
							btn1:function (i,o) {
								b = true;
								o.find('iframe')[0].contentWindow.btnSubmit();
							},
							end:function () {
								if(b) layui.table.reload('memberTable');
							}
						})
					}
				}

				table.on('toolbar(memberTable)',function (obj) {
					var event = obj.event;
					if("add" == event){
						active.addOrUpdate('/page/system/memberAdd');
					}
				})

				table.on('tool(memberTable)',function (obj) {
					var event = obj.event;
					if("edit" == event){
						active.addOrUpdate('/page/system/memberEdit/'+obj.data.id);
					}
				})
				
			});
		</script>
	</body>
</html>
